import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/svg.dart';

import 'package:get/get.dart';

import '../../../routes/app_pages.dart';
import '../../../style/app_colors.dart';
import '../../../style/widget_style.dart';
import '../../../utils/tips.dart';
import '../../../widgets/AppHeader.dart';
import '../../../widgets/CommonWidgets.dart';
import '../controllers/index_translation_controller.dart';

class IndexTranslationView extends GetView<IndexTranslationController> {
  const IndexTranslationView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SingleChildScrollView(
          controller: controller.scrollController,
          child: Stack(
            children: [
              Container(
                child: SvgPicture.asset(
                  "assets/images/header_part_bg.svg",
                  width: Get.width,
                ),
              ),
              AppHeader.obtainHeaderWithoutTitleAndRightPart(),
              Obx(()=>Container(
                width: Get.width,
                margin: EdgeInsets.only(top: 70.h),
                padding: EdgeInsets.all(20.w),
                child: Column(
                  children: [
                    Container(
                      height: 300.h,
                      decoration: BoxDecoration(
                        boxShadow: [
                          CommonWidgets.getBoxShadow(),
                        ],
                        color:  Colors.white,
                        borderRadius: BorderRadius.circular(8), // Optional: add border radius
                      ),
                      child: Stack(
                        children: [
                          // 输入框
                          TextField(
                            focusNode: controller.translateFocusNode.value,
                            controller: controller.textEditingController,
                            decoration: InputDecoration(
                              hintText: '开始输入...',
                              hintStyle: TextStyle(
                                  color: AppColors.hint_text_color.withOpacity(0.4),
                                  fontSize: 18.sp
                              ),
                              focusedBorder: InputBorder.none,
                              contentPadding: EdgeInsets.only(left: 16.w, right: 16.w, top: 12.h, bottom: 12.h),
                            ),
                            style: TextStyle(fontSize: 18.sp),
                            maxLines: 8,
                            onChanged: (v) {
                              controller.onTextChange(v);
                            },
                          ),
                          // 记录按钮
                         /* Positioned(
                            left: 16.w,
                            bottom: 12.h,
                            child: InkWell(
                              child: Row(
                                children: [
                                  Image.asset('assets/images/icon_index_record.png',width: 16.w,height: 16.h),
                                  SizedBox(width: 4),
                                  Text('记录', style: AppStyleThemeData.linkStyle),
                                ],
                              ),
                              onTap: () {
                                  Get.toNamed(Routes.HISTORY_RECORDS, parameters: {
                                  'source':'directTranslation'
                                  });
                              },
                            ),
                          ),*/
                          (controller.hasClipboardData.value && !controller.hasTextContent.value) ?
                          Positioned(
                            left: 16.w,
                            bottom: 12.h,
                            child: InkWell(
                              child: Row(
                                children: [
                                  Image.asset('assets/images/icon_index_paster.png',width: 16.w,height: 16.h),
                                  SizedBox(width: 4),
                                  Text('黏贴', style: AppStyleThemeData.linkStyle),
                                ],
                              ),
                              onTap: () {
                                 controller.pastFromOtherSource();
                              },
                            ),
                          ) : (controller.hasTextContent.value && !controller.drawBackBtnShow.value) ? Positioned(
                            left: 16.w,
                            bottom: 12.h,
                            child: InkWell(
                              child: Text('清除', style: AppStyleThemeData.linkStyle),
                              onTap: () {
                                controller.cleanContent();
                              },
                            ),
                          ): controller.drawBackBtnShow.value ? Positioned(
                            left: 16.w,
                            bottom: 12.h,
                            child: InkWell(
                              child: Row(
                                children: [
                                  Image.asset('assets/images/icon_draw_back_btn.png',width: 16.w,height: 16.h),
                                  SizedBox(width: 4),
                                  Text('撤销', style: AppStyleThemeData.linkStyle),
                                ],
                              ),
                              onTap: () {
                                controller.drawBack();
                              },
                            ),
                          ) : SizedBox() ,
                        ],
                      ),
                    ),
                    SizedBox(height: 16.h),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        InkWell(
                          onTap: () {
                            controller.chooseFromLanguages();
                          },
                          child: Container(
                            width: 85.w,
                            padding: EdgeInsets.all(8.w),
                            decoration: BoxDecoration(
                              boxShadow: [
                                CommonWidgets.getBoxShadow(),
                              ],
                              color:Colors.white,
                              borderRadius: BorderRadius.circular(8), // Optional: add border radius
                            ),
                            child: Text('${controller.audioService.fromLanFlagDisplay.value}',style: AppStyleThemeData.normal_bold,
                              maxLines: 2, // 最多显示2行
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                        ),
                        InkWell(
                          onTap: () {
                            controller.audioService.exchangeLanguages();
                          },
                          child: Container(
                            padding: EdgeInsets.all(18.w),
                            decoration: BoxDecoration(
                              boxShadow: [
                                CommonWidgets.getBoxShadow(),
                              ],
                              color:Colors.white,
                              borderRadius: BorderRadius.circular(8), // Optional: add border radius
                            ),
                            child: Image.asset('assets/images/icon_index_lang_exchange.png',width: 20.w,height: 20.h,),
                          ),
                        ),
                        InkWell(
                          onTap: () {
                             controller.chooseToLanguages();
                          },
                          child: Container(
                            width: 85.w,
                            padding: EdgeInsets.all(8.w),
                            decoration: BoxDecoration(
                              boxShadow: [
                                CommonWidgets.getBoxShadow(),
                              ],
                              color:Colors.white,
                              borderRadius: BorderRadius.circular(8), // Optional: add border radius
                            ),
                            child: Text('${controller.audioService.toLanFlagDisplay.value}',style: AppStyleThemeData.normal_bold,
                              maxLines: 2, // 最多显示2行
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                        ),
                        InkWell(
                          onTap: () {
                             if (!controller.arrows_btn.value) {
                                return;
                             }

                             if (controller.textEditingController.text.length > 500) {
                               Tips.showToast('目前系统仅支持500长度内容翻译.');
                               return;
                             }
                             controller.audioService.indexPageFinalFromLanguage.value = controller.textEditingController.text;
                             controller.translationText2Text();
                          },
                          child: Container(
                            padding: EdgeInsets.only(left:22.w,right: 22.w,top: 16.h,bottom: 16.h),
                            decoration: BoxDecoration(
                              shape: BoxShape.circle,
                              boxShadow: [
                                CommonWidgets.getBoxShadow()
                              ],
                              color: controller.arrows_btn.value? AppColors.app_base_theme_color: Colors.white
                            ),
                            child: Image.asset(controller.arrows_btn.value? 'assets/images/icon_index_arrows_white.png' :
                            'assets/images/icon_index_trans_arrows.png',width: 20.w,height: 20.h,),
                          ),
                        ),
                      ],
                    ),




                  ],
                ),
              ))
            ],
          ),
        )
    );
  }

}


class PositionSwapDemo extends StatefulWidget {
  @override
  _PositionSwapDemoState createState() => _PositionSwapDemoState();
}

class _PositionSwapDemoState extends State<PositionSwapDemo> {
  bool _isSwapped = false;
  final double _itemWidth = 100;
  final double _spacing = 20;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('组件位置交换动画')),
      body: InkWell(
        onTap: () => setState(() => _isSwapped = !_isSwapped),
        child: Stack(
          children: [
            // 组件A（红色方块）
            _AnimatedPositionedItem(
              offset: _isSwapped ? 1 : 0,
              itemWidth: _itemWidth,
              color: Colors.red,
            ),
            // 组件B（蓝色方块）
            _AnimatedPositionedItem(
              offset: _isSwapped ? 0 : 1,
              itemWidth: _itemWidth,
              color: Colors.blue,
            ),
          ],
        ),
      ),
    );
  }
}

class _AnimatedPositionedItem extends StatelessWidget {
  final int offset;
  final double itemWidth;
  final Color color;

  const _AnimatedPositionedItem({
    required this.offset,
    required this.itemWidth,
    required this.color,
  });

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    final startPosition = (screenWidth - itemWidth) / 2;

    return AnimatedPositioned(
      duration: Duration(milliseconds: 500),
      curve: Curves.easeInOutCubic,
      left: startPosition + (offset * (itemWidth + 20)),
      top: 200,
      child: Container(
        width: itemWidth,
        height: itemWidth,
        decoration: BoxDecoration(
          color: color,
          borderRadius: BorderRadius.circular(16),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.2),
              blurRadius: 8,
              offset: Offset(0, 4),
            )
          ],
        ),
      ),
    );
  }
}

